import React, { useState, useEffect } from 'react';
import { Card } from '../../components/Card';
import { Button } from '../../components/Button';
import './GoalsSection.css';

export const GoalsSection = () => {
  const [goals, setGoals] = useState([]);
  const [gamification, setGamification] = useState(null);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    chrome.storage.local.get(['userGoals', 'gamification'], (result) => {
      setGoals(result.userGoals || []);
      setGamification(result.gamification || {
        xp: 0,
        level: 1,
        totalXP: 0,
        currentStreak: 0
      });
    });
  };

  return (
    <section className="goals-section">
      <div className="section-header">
        <h2>Goals & Progress</h2>
        <Button>+ Add Goal</Button>
      </div>

      {gamification && (
        <div className="stats-dashboard">
          <Card className="stat-card">
            <div className="stat-icon">⭐</div>
            <div className="stat-info">
              <div className="stat-value">{gamification.level || 1}</div>
              <div className="stat-label">Level</div>
            </div>
          </Card>
          <Card className="stat-card">
            <div className="stat-icon">🔥</div>
            <div className="stat-info">
              <div className="stat-value">{gamification.currentStreak || 0}</div>
              <div className="stat-label">Day Streak</div>
            </div>
          </Card>
          <Card className="stat-card">
            <div className="stat-icon">💎</div>
            <div className="stat-info">
              <div className="stat-value">{gamification.totalXP || 0}</div>
              <div className="stat-label">Total XP</div>
            </div>
          </Card>
        </div>
      )}

      <div className="goals-grid">
        {goals.map((goal) => (
          <Card key={goal.id} className="goal-card">
            <h3>{goal.title}</h3>
            {goal.description && <p>{goal.description}</p>}
          </Card>
        ))}
      </div>
    </section>
  );
};

